<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" bgColor="#f8f8f8" :auto="false">
    <template #top>
      <uv-navbar placeholder title="申请退款" bgColor="#FFF" :autoBack="true"></uv-navbar>
    </template>
    <view class="box">
      <view class="contentForm m-t-32">
        <uv-checkbox-group v-model="checkboxValue" @change="getCheckboxValue">
          <view class="mallProd flex m-b-20 p-24" v-for="(item, index) in dataList" :key="index">
            <view>
              <uv-image width="192rpx" height="192rpx" :src="item.image" radius="12rpx"></uv-image>
            </view>
            <view class="flex-1 flex-col m-l-20">
              <view class="flex justify-bet align-ali">
                <view class="font-30">
                  {{ item.product_name }}
                </view>
                <view>
                  <uv-checkbox activeColor="#830102" :name="item"></uv-checkbox>
                </view>
              </view>
              <view class="flex m-t-25 flex-wrap" v-if="item.add_type == 1">
                <view class="content font-28 m-r-20 p-x-14 p-y-6" v-for="(item2, index2) in item.suk?.split(',')"
                  :key="index2">
                  {{ item2 }}
                </view>
              </view>
              <view class="m-b-30 m-t-10 " style="gap: 20rpx" v-else>
                <view class="font-26 font-weight-middle"> 实际周长:{{ item.reality_size }}cm</view>
                <view class="font-26 m-t-10 font-weight-middle"> {{ item.suk.line.product_name }}({{
                  item.suk.line.suk
                }}){{ item.total_number || '0' }}颗珠子
                  <!-- {{item.suk.materials.map(item2 => item2.product_name + 'x'
                    +
                    item2.number).join('、')}} -->
                </view>
              </view>
              <view class="flex m-t-28 justify-bet align-ali">
                <view class="font-26">
                  x{{ item.number }}
                </view>
                <view class="font-32 font-weight-bold">
                  ￥{{ item.total_price / 100 }}
                </view>
              </view>
            </view>
          </view>
        </uv-checkbox-group>
      </view>
    </view>
    <template #bottom>
      <view class="submit fixed-bottom-50" @click="getRoute">
        确认
      </view>
    </template>
  </z-paging>
</template>

<script setup>
import { orderDetail } from '@/api/api';
import { ref, onMounted, reactive } from 'vue';
import { useStore } from 'vuex';
import { onReachBottom, onShow, onReady, onLoad } from '@dcloudio/uni-app';
import { os, sys } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
const checkboxValue = ref([]);
const order_sn = ref('');
const paging = ref(null);
const dataList = ref([]); //  详情列表数据
onLoad((options) => {
  if (options.order_sn) {
    order_sn.value = options.order_sn;
    setTimeout(() => {
      paging.value.reload()
    }, 10);
  }
})
//获取详情
const queryList = (page, pagesize) => {
  orderDetail({ order_sn: order_sn.value, page, pagesize }).then(res => {
    paging.value.complete(res.data.product_list);
  })
};
const getCheckboxValue = (e) => {
  console.log(e);
}
const getRoute = () => {
  if (checkboxValue.value.length == 0) return uni.showToast({ title: '请选择商品', icon: 'none' })
  route('/pagesA/pages/originality/refundSubmis', {
    order_sn: order_sn.value,
    checkboxValue: encodeURIComponent(JSON.stringify(checkboxValue.value)),
  })
}
</script>

<style lang="scss" scoped>
.box {
  // min-height: 100vh;
  background: #F8F8F8;

  .contentForm {
    // width: 686rpx;
    // height: 240rpx;
    // background: #FFF;

    .mallProd {
      width: 686rpx;
      margin: 0 auto;
      border-radius: 12rpx;
      background: #FFF;

      .content {
        background: #F3F3F3;
        border-radius: 12rpx;
      }
    }
  }
}
</style>
